<template>
        <el-dialog v-model="dialogVisible" :title="tip" width="800"
             :modal="true" 
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="false"
             draggable>
            <span>It's a draggable Dialog</span>
            


             <el-form
                ref="formRef"
                style="max-width: 600px"
                :model="form"
                :rules="rules"
                label-width="auto"
            >
                 <el-form-item label="编号" prop="num">
                    <el-input v-model="form.num" />
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
            </el-form>


            <template #footer>

            <div class="dialog-footer">
                <el-button @click="cancelDialog(formRef)">取消</el-button>
                <el-button type="primary" @click="submitDialog(formRef)">
                确认
                </el-button>
            </div>
            </template>
        </el-dialog>

 
</template>
<script  setup lang="ts">
import { reactive, ref, watch, type PropType } from 'vue';
import type { TenantDto } from './model';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';

    const props = defineProps({
        dialogShow: {
            type: Boolean,
            required: true
        },
        formData: {
            type: Object as PropType<TenantDto>,
            required: true
        }
    })
    watch(
        () => props.dialogShow,
        (newVal) => { /* 处理逻辑 */ },
        { deep: true }
    ) 
    const dialogVisible = ref(props.dialogShow)
    const tip = ref("租户编辑")
    const form = ref(JSON.parse(JSON.stringify(props.formData)))
    const formRef = ref<FormInstance>()
    const rules = reactive<FormRules<TenantDto>>({
        num: [
            {
            required: true,
            message: '请填写租户编码',
            trigger: 'blur',
            },
        ],
        name: [
            { required: true, message: '请填写租户名称', trigger: 'blur' },
        ],
       
    })


    
    // 声明可触发的事件
    const emit = defineEmits(['submit']);

    function cancelDialog(formEl: FormInstance | undefined){
        ElMessage.info("取消编辑")
        emit('submit', false);
    }

    async function submitDialog(formEl: FormInstance | undefined){
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                console.log('submit!')
                ElMessage.info("校验通过，开始提交")
                emit('submit', true);
            } else {
                ElMessage.info("校验失败")
                console.log('error submit!', fields)
            }
        })
       
    }


</script>